﻿<!DOCTYPE html>
<html>
<head>
    <!-- Standard Meta -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <!-- Site Properities -->
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" type="text/css" href="~/Content/Semantic/semantic.css">
    <link rel="stylesheet" type="text/css" href="~/Content/Semantic/kitchensink.css">
    <link rel="stylesheet" type="text/css" href="~/Content/override.css">
    <script src="~/Content/Semantic/jquery.js"></script>
    <!-- Used with Tab History !-->
    <script src="~/Content/Semantic/jquery.address.min.js"></script>
    <script src="~/Content/Semantic/semantic.js"></script>
</head>
<body class="ui page grid fullwidth">

    <div class="sixteen column row y-red fixed-top">
        <div class="sixteen wide column y-green div-with-border">

            <div class="ui tiered purple inverted menu no-padding">
                <div class="menu">
                    <a class="item y-gray">
                        <b>ICON</b>
                    </a>
                    <a class="active item">
                        Home
                    </a>
                    <a class="ui dropdown item">
                        <i class="dropdown icon"></i>Messages
                        <div class="menu">
                            <div class="item">
                                <i class="dropdown icon"></i>
                                <span class="text">Categories</span>
                                <div class="menu">
                                    <div class="item">Unread</div>
                                    <div class="item">Promotions</div>
                                    <div class="item">Updates</div>
                                </div>
                            </div>
                            <div class="item">Archive</div>
                        </div>
                    </a>
                    <a class="item">
                        Browse
                    </a>
                </div>
                @*<div class="sub menu">
                    <a class="item">Activity Feed</a>
                    <a class="item">Profile</a>
                    <a class="item">Events</a>
                </div>*@
            </div>

            <script>
                $('.dropdown')
                  .dropdown({
                      // you can use any ui transition
                      transition: 'drop'
                  })
                ;
            </script>


        </div>
    </div>

    <div class="sixteen column row y-blue page-middle">
        <div class="sixteen wide column y-blue">

            @RenderBody()

        </div>
        
    </div>


    <div class="sixteen column row y-blue">
        <div class="sixteen wide column y-green">
            <p>1</p>
        </div>
    </div>

</body>
</html>
